<template>
    <view class="pages" :class="GlobalThemes.commonBackGroundClass">
        <view class="search-top-box" id="navbar">
            <u-navbar
                back-icon-color="#ffffff"
                :is-back="true"
                :custom-back="GoBack"
                :border-bottom="false"
                :background="typelist[tabIndex].background"
            >
                <view class="mp-name">
                    <text>{{ i18n('index').appName }}</text>
                </view>
            </u-navbar>
        </view>
        <view class="list">
            <u-cell-group :border="false">
                <scroll-view
                    class="list-scroll"
                    :refresher-enabled="true"
                    :refresher-triggered="refreshs"
                    @scrolltolower="getMore"
                    @refresherrefresh="onRefresh"
                    scroll-y
                >
                    <u-cell-item
                        v-for="(item, index) in list"
                        :key="index"
                        :border-bottom="false"
                        :border-top="false"
                        @click="goMsg(item)"
                        :icon="item.is_read ? 'chat' : 'chat-fill'"
                        :icon-style="{
                            color:
                                item.replay != ''
                                    ? item.is_read
                                        ? '#c2c2c2'
                                        : typelist[tabIndex].color
                                    : typelist[tabIndex].color
                        }"
                        :title-style="{
                            color:
                                item.replay != ''
                                    ? item.is_read
                                        ? '#c2c2c2'
                                        : typelist[tabIndex].color
                                    : typelist[tabIndex].color
                        }"
                        :label="
                            item.replay != ''
                                ? item.is_read
                                    ? '已读'
                                    : '未读'
                                : '暂未回复'
                        "
                        :label-style="{
                            color:
                                item.replay != ''
                                    ? item.is_read
                                        ? '#c2c2c2'
                                        : typelist[tabIndex].color
                                    : typelist[tabIndex].color
                        }"
                        :title="item.type + ' ' + item.create_time"
                    ></u-cell-item>
                </scroll-view>
            </u-cell-group>
            <u-loadmore
                v-show="loading"
                :status="status"
                :load-text="loadText"
                @loadmore="getMore"
            />
        </view>
    </view>
</template>

<script>
const MyApp = getApp();
const globalData = MyApp.globalData;
export default {
    data() {
        return {
            tabIndex: 0,
            typelist: globalData.typelist,
            page: 1,
            limit: 20,
            isEnd: false,
            list: [],
            status: 'loadmore',
            refreshs: false,
            loading: false,
            loadText: {
                loadmore: '加载更多',
                loading: '正在加载中',
                nomore: '没有啦'
            }
        };
    },
    computed: {
        i18n() {
            return globalData.$t;
        }
    },
    onLoad() {
        MyApp.checkLogin(true);
    },
    onReady() {
        this.tabIndex = uni.getStorageSync('tabIndex') || 0;
    },
    onShow() {
        this.getMsgList();
    },
    methods: {
        getMore() {
            this.page = this.page + 1;
            this.limit = 20;
            if (!this.isEnd) {
                this.getMsgList();
            }
        },
        onRefresh() {
            this.list = [];
            this.isEnd = false;
            this.page = 1;
            this.limit = 20;
            this.refreshs = true;
            this.getMsgList();
        },
        getMsgList() {
            let _this = this;
            if (!_this.isEnd) {
                _this.loading = true;
                _this.status = 'loading';
                _this.$http
                    .post('/user/user/getFeedbackList', {
                        page: _this.page,
                        limit: _this.limit
                    })
                    .then(res => {
                        _this.refreshs = false;
                        if (res.data.list.length > 0) {
                            res.data.list.forEach((v, k) => {
                                _this.list.push(v);
                            });
                            _this.status = 'loadmore';
                        } else {
                            _this.isEnd = true;
                            _this.status = 'nomore';
                        }
                    });
            }
        },
        goMsg(item) {
            this.$u.route({
                url: '/packageA/pages/user/child/msg_detail',
                params: {
                    id: item.id
                }
            });
        }
    }
};
</script>

<style lang="scss">
.pages {
    padding: 20upx;
    .list {
        height: calc(100vh - 260upx);
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        .list-scroll {
            height: calc(100vh - 300upx);
        }
    }
}
</style>
